<script setup>
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import {getStatus} from "@/api/getStatus";
const checkRepositoryDisabled=ref(false);
const loading = ref(false);
const loading4 = ref(false);
const loading2 = ref(false);
const waitcheck = ref(null);
const Inbound = ref(null);
//el-button不能直接获取dom
const return1 = ref(null);
const tableData =ref([]);

const currentPageWait=ref("1");
const currentPageOK=ref("1");
const currentPageNO=ref("1");
const totalPageWait=ref(0);

const totalPageOK=ref(0);
const totalPageNO=ref(0);

const arrowLeftdisabled=ref(true);
const arrowRightdisabled=ref(false);

let orderStatus = ref("待质检订单") ;

const judgeDisplayStatus=()=>{

  if(orderStatus.value==="待质检订单"){
    return false;
  }else if(orderStatus.value==="已入库订单"){
    return false;
  }else if(orderStatus.value==="已退回订单"){ {
    return true;
  }
}
}

const judgeDisplayStatus2=()=>{

if(orderStatus.value==="待质检订单"){
  return false;
}else if(orderStatus.value==="已入库订单"){
  return true;
}else if(orderStatus.value==="已退回订单"){ {
  return false;
}

}

}

const judgeArrow =(totalPage,currentPage)=>{

  if(totalPage===0||totalPage===1){
   arrowRightdisabled.value=true;
   arrowLeftdisabled.value=true;
   return;
  }else{
    arrowRightdisabled.value=false;
    
  }


  if(Number(currentPage)=== totalPage){
    arrowRightdisabled.value=true;
  }

  if(Number(currentPage)!==1){
    console.log(Number(currentPage)!==1);

    arrowLeftdisabled.value=false;
  }else{
    arrowLeftdisabled.value=true;
  }
}

const checkButton = async () => {
  waitcheck.value.classList.add("highlight");
  Inbound.value.classList.remove("highlight");
  return1.value.classList.remove("highlight");
  threeButtonHighlight.value = "waitcheck";
  loading.value = true;
  const res=await getStatus({
    status:"1",
    pageNum:currentPageWait.value,
    pageSize:"6",
  });//需要传数据吗？
  checkRepositoryDisabled.value=true;
  tableData.value=res.data.data.content;
  totalPageWait.value=res.data.data.totalPages;
  loading.value = false;
  judgeArrow(totalPageWait.value,currentPageWait.value);
  

  orderStatus.value="待质检订单";


};



const inboundButton = async () => {
  waitcheck.value.classList.remove("highlight");
  Inbound.value.classList.add("highlight");
  return1.value.classList.remove("highlight");
  threeButtonHighlight.value = "Inbound";
  loading.value = true;
  const res=await getStatus({
    status:"2",
    pageNum:currentPageOK.value,
    pageSize:"6",
  });
  checkRepositoryDisabled.value=false;
  tableData.value=res.data.data.content;
  totalPageOK.value=res.data.data.totalPages;
  loading.value = false;
  judgeArrow(totalPageOK.value,currentPageOK.value);

  orderStatus.value="已入库订单";
  
};
const returnButton = async () => {
  waitcheck.value.classList.remove("highlight");
  Inbound.value.classList.remove("highlight");
  return1.value.classList.add("highlight");
  threeButtonHighlight.value = "return1";
  loading.value = true;
  const res=await getStatus({
    status:"3",
    pageNum:currentPageNO.value,
    pageSize:"6",
  });//需要传数据吗？
  checkRepositoryDisabled.value=true;
  tableData.value=res.data.data.content;
  totalPageNO.value=res.data.data.totalPages;
  loading.value = false;
  judgeArrow(totalPageNO.value,currentPageNO.value);
  orderStatus.value="已退回订单";
};

const displayStatus=(status)=>{

   if(status==1){
    return "等待质检";
  }else if(status==2){
    return "已入库";
  }else if(status==3) {
    return "拒绝入库";
  }

}


// setup里就是onCreated
const getCheckWaitTable=async ()=>{
  loading.value = true;
  const res=await getStatus({
    status:"1",
    pageNum:"1",
    pageSize:"6",
  });//需要传数据吗？
  checkRepositoryDisabled.value=true;
  tableData.value=res.data.data.content;
  totalPageWait.value=res.data.data.totalPages;
  loading.value = false;
  if(totalPageWait.value===0||totalPageWait.value===1){
    console.log(totalPageWait.value);
    arrowRightdisabled.value=true;

   }

}


  getCheckWaitTable();


import {createInboundApi} from "@/api/createInbound";


// const dialogTableVisible = ref(false);
const dialogFormVisible = ref(false);

const formLabelWidth = "140px";

const form = ref({
 name:"草莓",
 kind:"",
 unit:1,
 number:10,

 
});

import {validateCreateInbound} from '@/utils/validate.js';
const createInbound= async ()=>{


  const valid = validateCreateInbound(form.value);

  if(!valid) return;

  try{

    const res= await createInboundApi(form.value);
    dialogFormVisible.value=false;
   
    ElMessage.success("创建成功");
    checkButton();
  }catch(error){
    ElMessage.error("创建失败");
  }

 
 
}

// const StatusColor = ref("");

const setStatusClass = (status) => {
  if (status === 2) {
    
    return "success-status";
  } else if (status === 3) {
    return "error-status";
  } else if(status === 1) {
    return "processing-status";
  }
};
const editDialogVisible = ref(false);


 const checkReportInfo=ref({
  id:-1,
  checkReport:""
 });



import {editCheckApi} from "@/api/editCheckApi";



const editCheck = (id,checkReport) => {
  checkReportInfo.value.id=id;
  editDialogVisible.value = true;
  checkReportInfo.value.checkReport=checkReport;
  
 
  

};



const clickCheckOk= async ()=>{
  loading2.value=true;
  const res= await editCheckApi({
    id:checkReportInfo.value.id,
    checkReport:checkReportInfo.value.checkReport,
    pass:1
  });
  loading2.value=false;
  if (res.data.code === 0) {
    ElMessage.success("编辑成功");
    
  
  } else {
    ElMessage.error(res.data.msg);
  }
 
  editDialogVisible.value=false;
 
  let statusSend;
 
  if(orderStatus.value==="已入库订单"){

    statusSend="2";

    const res2=await getStatus({
    status:statusSend,
    pageNum:"1",
    pageSize:"6",
  });//需要传数据吗？
 
  tableData.value=res2.data.data.content;
  currentPageOK.value="1";
  totalPageOK.value=res2.data.data.totalPages;

  judgeArrow(totalPageOK.value,currentPageOK.value);
  arrowLeftdisabled.value=true;
  }else if(orderStatus.value==="已退回订单"){
    statusSend="3";
    const res2=await getStatus({
    status:statusSend,
    pageNum:"1",
    pageSize:"6",
  });//需要传数据吗？
 
  tableData.value=res2.data.data.content;
  currentPageNO.value="1";
  totalPageNO.value=res2.data.data.totalPages;
  judgeArrow(totalPageNO.value,currentPageNO.value);
  arrowLeftdisabled.value=true;
  }else{
    statusSend="1";
    const res2=await getStatus({
    status:statusSend,
    pageNum:"1",
    pageSize:"6",
  });//需要传数据吗？
 
  tableData.value=res2.data.data.content;
  currentPageWait.value="1";
  totalPageWait.value=res2.data.data.totalPages;
  judgeArrow(totalPageWait.value,currentPageWait.value);
  arrowLeftdisabled.value=true;
  }
 


}

const clickCheckNO= async ()=>{

const res=await editCheckApi({
  id:checkReportInfo.value.id,
  checkReport:checkReportInfo.value.checkReport,
  pass:2
});

console.log(res);
ElMessage.success("编辑成功");

editDialogVisible.value=false;
let statusSend;
  if(orderStatus.value==="已入库订单"){
    statusSend="2";
    const res2=await getStatus({
    status:statusSend,
    pageNum:"1",
    pageSize:"6",
  });//需要传数据吗？
 
  tableData.value=res2.data.data.content;
  currentPageOK.value="1";
  totalPageOK.value=res2.data.data.totalPages;
  judgeArrow(totalPageOK.value,currentPageOK.value);
  arrowLeftdisabled.value=true;
  }else if(orderStatus.value==="已退回订单"){
    statusSend="3";
    const res2=await getStatus({
    status:statusSend,
    pageNum:"1",
    pageSize:"6",
  });//需要传数据吗？
 
  tableData.value=res2.data.data.content;
  currentPageNO.value="1";
  totalPageNO.value=res2.data.data.totalPages;
  judgeArrow(totalPageNO.value,currentPageNO.value);
  arrowLeftdisabled.value=true;
  }else{
    statusSend="1";
    const res2=await getStatus({
    status:statusSend,
    pageNum:"1",
    pageSize:"6",
  });//需要传数据吗？
 
  tableData.value=res2.data.data.content;
  currentPageWait.value="1";
  totalPageWait.value=res2.data.data.totalPages;
  judgeArrow(totalPageWait.value,currentPageWait.value);
  arrowLeftdisabled.value=true;
  }

const res2=await getStatus({
  status:statusSend,
  pageNum:"1",
  pageSize:"6",
});//需要传数据吗？

tableData.value=res2.data.data.content;

};



const changePageLeft=()=>{

if(orderStatus.value==="已入库订单"){

  let Pagenumber= Number(currentPageOK.value) ;
  Pagenumber-=1;
   if(Pagenumber===1){
    arrowLeftdisabled.value=true;
   }
   arrowRightdisabled.value=false;
   currentPageOK.value=`${Pagenumber}`;
   inboundButton();

  }else if(orderStatus.value==="已退回订单"){
    let Pagenumber= Number(currentPageNO.value) ;
    Pagenumber-=1;
   if(Pagenumber===1){
    arrowLeftdisabled.value=true;
   }
   arrowRightdisabled.value=false;
   currentPageNO.value=`${Pagenumber}`;
   
   returnButton();
  
  }else{
    let Pagenumber= Number(currentPageWait.value) ;
    Pagenumber-=1;
   if(Pagenumber===1){
    arrowLeftdisabled.value=true;
   }
   arrowRightdisabled.value=false;
   currentPageWait.value=`${Pagenumber}`;
   
   checkButton();
  
  }

};
const changePageRight=()=>{

if(orderStatus.value==="已入库订单"){

  let Pagenumber= Number(currentPageOK.value) ;
  Pagenumber+=1;
   if(Pagenumber===totalPageOK.value){
    arrowRightdisabled.value=true;
   }
   arrowLeftdisabled.value=false;
   currentPageOK.value=`${Pagenumber}`;
   inboundButton();

  }else if(orderStatus.value==="已退回订单"){
    let Pagenumber= Number(currentPageNO.value) ;
    Pagenumber+=1;
   if(Pagenumber===totalPageNO.value){
    arrowRightdisabled.value=true;
   }
   arrowLeftdisabled.value=false;
   currentPageNO.value=`${Pagenumber}`;
   
   returnButton();
  
  }else{
    let Pagenumber= Number(currentPageWait.value) ;
    Pagenumber+=1;
   if(Pagenumber===totalPageWait.value){
    arrowRightdisabled.value=true;
   }
   arrowLeftdisabled.value=false;
   currentPageWait.value=`${Pagenumber}`;
   
   checkButton();
  
  }

};
const threeButtonHighlight = ref("waitcheck");


onMounted(()=>{
  waitcheck.value.classList.add("highlight");
  Inbound.value.classList.remove("highlight");
  return1.value.classList.remove("highlight");
  threeButtonHighlight.value = "waitcheck";
});



const dialogRepositoryVisible=ref(false);
const shelf=ref([]);
import { queryLocation } from '@/api/queryLocation';

const handleCheckRepository= async (id)=>{
  console.log(id);
  loading4.value=true;
  dialogRepositoryVisible.value=true;
  const res=await  queryLocation({
    inboundId:id,
  });
  shelf.value=res.data.data;
  loading4.value=false;

}



</script>

<template>
  <div >
   

    <div class="navigator">
      <!-- 在 Element UI 中，el-button 是一个按钮组件，它默认是行内块（inline-block）显示模式 -->

      <div class="check-wait" ref="waitcheck" @click="checkButton">待质检</div>
      <div class="Inbound" ref="Inbound" @click="inboundButton">已入库</div>
      <div class="return" ref="return1" @click="returnButton">已退回</div>
    </div>

    <el-button
      class="createButton"
      plain
      color="#3c9d19"
      @click="dialogFormVisible = true"
    >
      <el-icon><Plus /></el-icon> 创建入库
    </el-button>
    <div class="divider-with-text" >
      <span >{{ orderStatus }}</span>
    </div>

    <el-table v-loading="loading" :data="tableData"  stripe style="width: 100%">
      <el-table-column prop="id" label="订单ID" width="80" />
      <el-table-column prop="name" label="货物名称" width="120" />
      <el-table-column prop="kind" label="货物类型" width="80" />
      <el-table-column prop="unit" label="空间单位" width="80" />
      <el-table-column prop="inNumber" label="货物数量" width="80" />
      <el-table-column prop="createTime" label="创建时间" width="140" />
      <el-table-column prop="createUser" label="创建人" width="80" />
     
      
      <el-table-column  label="查看存储位置" width="120" >

     
        <template v-slot="scope">
          <div >
            <el-button :disabled="checkRepositoryDisabled" type="success"  round  @click="handleCheckRepository(scope.row.id)">查看</el-button>
          </div>
        </template>
      </el-table-column>

      
      <el-table-column prop="checkUser" label="质检人" width="80" />
      <el-table-column
        prop="checkTime"
        label="质检时间"
        width="140"
      />
      <el-table-column  label="&nbsp&nbsp&nbsp质量检测" width="120">
        <template v-slot="scope">
          <div >
            <el-button type="info"  round @click="editCheck(scope.row.id,scope.row.checkReport)">编辑</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column  label="入库状态" width="140">
        <template #default="a">
          <div :class="setStatusClass(a.row.status)">
            {{ displayStatus(a.row.status)}}
          </div>
        </template>
      </el-table-column>
      <!-- 待质检，已退货，已入库 -->
    </el-table>


    
    <div class="footerBox">
      <div class="footerPage">
      
        <el-button type="primary" color="pink" @click="changePageLeft" :disabled="arrowLeftdisabled"><el-icon class="el-icon--right"><ArrowLeft /></el-icon></el-button>
        
        <div v-if="orderStatus==='待质检订单' " class="pageNumber">
          {{currentPageWait }}/{{totalPageWait }}
        </div>
        <div v-if="orderStatus==='已入库订单'" class="pageNumber">
          {{currentPageOK }}/{{totalPageOK }}
        </div>
        <div v-if="orderStatus==='已退回订单'" class="pageNumber">
          {{currentPageNO }}/{{totalPageNO }}
        </div>
       
  
      <el-button type="primary" color="pink" :disabled="arrowRightdisabled" @click="changePageRight">
        <el-icon class="el-icon--right"  ><ArrowRight /></el-icon>
      </el-button>
      </div>
    </div>
    
  </div>

  <el-dialog v-model="dialogFormVisible" title="创建入库订单" width="500">
    <el-form v-model="form">
      <el-form-item label="货物名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="货物类型" :label-width="formLabelWidth">
        <el-input v-model="form.kind" autocomplete="off" />
      </el-form-item>
      <el-form-item label="货物数量" :label-width="formLabelWidth">
        <el-input v-model="form.number" autocomplete="off" />
      </el-form-item>
      <el-form-item label="货物空间占用单位" :label-width="formLabelWidth">
        <el-input v-model="form.unit" autocomplete="off" />
      </el-form-item>

      <!-- <el-form-item label="选择仓库" :label-width="formLabelWidth">
        <el-select v-model="form.warehouse" placeholder="请选择">
          <el-option label="生鲜仓库" value="A" />
          <el-option label="常用工具仓库" value="B" />
          <el-option label="危险品仓库" value="C" />
          <el-option label="电子产品仓库" value="D" />
        </el-select>
      </el-form-item> -->

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          type="primary"
          color="#3c9d19"
          @click=" createInbound"
        >
          创建订单
        </el-button>
        <el-button @click="dialogFormVisible = false">取消创建</el-button>
      </div>
    </template>
  </el-dialog>

  <el-drawer  v-model="editDialogVisible" :with-header="true">

    <div v-if="loading2" class="loading-overlay">
      <!-- 这里可以放置加载动画或加载提示 -->
      <div class="loader"></div>
      <p>Loading...</p>
    </div>

    <h1 class="checkTitle">质量检测报告</h1>
    <el-form-item label="质检结果" :label-width="formLabelWidth">
      <el-input
        style="width: 500px; height: 200px"
        :rows="6"
        type="textarea"
        placeholder="请输入"
       v-model="checkReportInfo.checkReport"
      />
    </el-form-item>

    <div class="two-check-button">
      <el-button class="el-button" round color="#3c9d19" type="primary" @click="clickCheckOk" :disabled="judgeDisplayStatus()"
      ><span style="margin-top: 3px">质检合格</span></el-button
    >
    <el-button class="el-button" round color="red" type="primary" :disabled="judgeDisplayStatus2()" @click="clickCheckNO"
      ><span style="margin-top: 1px" >质检不合格</span></el-button
    >
    </div>
   
    <!-- <el-button class="el-button" round color="#626aef" type="primary" :disabled="checkReportInfo.setAnotherTime" @click="clickCheckWait" 
      ><span style="margin-top: 1px" >稍后质检</span></el-button
    > -->
    <!-- 属性放错位置了？ -->
  </el-drawer>


  <el-dialog
  v-model="dialogRepositoryVisible"
  top="100px"
  left="100px"
  title="存储位置"
  width="400"
>

    <el-table v-loading="loading4" :data="shelf" style="width: 100%">

      <el-table-column prop="repositoryName" label="仓库" width="100" />
      <el-table-column prop="shelfOrder" label="货架编号" width="100" />
      <el-table-column prop="floorOrder" label="层号" width="100" />
     
     
    </el-table>
  
</el-dialog>
</template>

<style scoped>

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.demonstration {
  display: inline-block;
  color: var(--el-text-color-secondary);
  text-align: center;
  font-size: 14px;
  margin: 6px;
}

.flex-layout {
  display: flex;
  margin-bottom: 20px;
}

.flex-layout el-input {
  display: inline-block;
  margin: 50px;
}

.el-button {
  margin: 0 15px;
}
.flex-layout-two {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.divider-with-text {
  display: flex;
  align-items: center;
  text-align: start;
}

.divider-with-text::before,
.divider-with-text::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #3c9d19; /* 横杠颜色 */
}

.divider-with-text::before {
  margin-right: 10px; /* 文字和横杠之间的间距 */
}

.divider-with-text::after {
  margin-left: 10px; /* 文字和横杠之间的间距 */
}

.divider-with-text > span {
  white-space: nowrap;
}
.success-status {
  color: rgb(10, 233, 48);
 
}
.error-status {
  color: red;
}
.processing-status {
  color: blue;
}

.check-wait {
  line-height: 50px;
  text-align: center;
  border: none;
  height: 50px;
  width: 80px;
  margin: 0 1px;
}
.Inbound {
  line-height: 50px;
  text-align: center;
  border: none;
  height: 50px;
  width: 80px;
  margin: 0 1px;
}

.Inbound:hover {
  color: #3c9d19;
  cursor: pointer;
  background-color: hsla(349, 94%, 51%, 0.3);
}
.return:hover {
  color: #3c9d19;
  cursor: pointer;
  background-color: hsla(349, 94%, 51%, 0.3);
}
.check-wait:hover {
  color: #3c9d19;
  cursor: pointer;
  background-color: hsla(349, 94%, 51%, 0.3);
}

.return {
  line-height: 50px; /*为什么100%不行？*/
  text-align: center;
  border: none;
  height: 50px;
  width: 80px;
  margin: 0 1px;
}
.navigator {
  display: flex;
  width: 300px;
  box-shadow: inset;
}
.createButton {
  position: absolute;
  top: 90px;
  right: 20px;
}
.checkTitle {
  text-align: center;
  width: 100%;
}
.highlight {
  background-color: hsla(349, 94%, 51%, 0.3);
}

.footerPage {
  justify-content: space-around;
  display: flex;
  height: 5px;
  width:200px;
}
.pageNumber{
  display: inline-block;
  text-align: center;
 line-height: 32px;

}

.footerBox{
  position:absolute;
  bottom:50px;

}
.el-table--striped tbody tr:nth-child(odd) {
  background-color: #cf1b1b; /* 设置奇数行背景色 */
}
.two-check-button{
  display: flex;
  width: 450px;
  justify-content: center;
}
</style>